<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>07_component_state</title>
  </head>
  <body>
    <div id="example"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
      /*
      需求: 自定义组件, 功能说明如下
        1. 显示h2标题, 初始文本为: 你喜欢我
        2. 点击标题更新为: 我喜欢你
      */

      // 定义组件
      class LikeMe extends React.Component {
        // constructor() {
        //   super(); // 使用extends的时候，必须在constructor调用super
        //   // 初始化state
        //   this.state = {
        //     isLikeMe: true,
        //   };
        // }
        state = {
          isLikeMe: true,
        }
        // 定义事件回调函数
        // setIsLikeMe = () => {
        //   // 改变state
        //   // Uncaught TypeError: Cannot read property 'state' of undefined
        //   // console.log(this); undefined
        //   // this.state.isLikeMe = !isLikeMe; // state数据不能直接修改
        //   // 既会更新数据，同时也会更新用户界面（页面会重新渲染） --> 重新调用render
        //   this.setState({
        //     isLikeMe: !this.state.isLikeMe,
        //   });
        // };

        // 正常情况下，ES6类函数this指向实例
        // React，ES6类函数默认this指向undefined
        // 改成箭头函数，方法添加到实例的直接属性，不在原型上
        setIsLikeMe = () => {
          // console.log(this);
          this.setState({
            isLikeMe: !this.state.isLikeMe,
          });
        };

        render() {
          console.log("render", this);
          // 读取state
          const { isLikeMe } = this.state;

          return (
            <h1 onClick={this.setIsLikeMe}>
              {isLikeMe ? "你喜欢我" : "我喜欢你"}
            </h1>
          );
        }
      }

      // 将组件渲染到指定容器中
      ReactDOM.render(<LikeMe />, document.getElementById("example"));
    </script>
  </body>
</html>
